<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .parent {
            width: 100px;
            height: 100px;
            border: 5px solid red;
            overflow: visible;
            overflow: auto;
            overflow: hidden;
            overflow: scroll;
        }

        .parent div {
            width: 200px;
            height: 200px;
            /*width: 50px;*/
            /*height: 50px;*/
            background: green;
        }
    </style>
</head>
<body>
<!--
      overflow            针对超出父级的内容如何显示
        visible           默认值，超出的内容会显示出来
        auto              如果内容超出父级，就出现滚动条，如果内容没有超出，就不出现滚动条；
        hidden            超出的内容给隐藏掉
        scroll            不管内容有没有超出，都会出现滚动条
-->
<div class="parent">
    <div></div>
</div>

</body>
</html>